<!-- 报告列表 -->
<template>
	<view class="container d-flex">
		<Navbar title="我的报告" bgColor="#F3F5FF" />
		
		<text class="descripe">为确保报告时效性，您的报告数据有效期30天，过期后自动删除数据，请及时保存您的报告。</text>
		
		<uv-tabs :list="list" @click="click"></uv-tabs>
		
		<swiper class="swiper">
			<swiper-item><List /></swiper-item>
			<swiper-item><List /></swiper-item>
			<swiper-item><List /></swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {reactive} from 'vue'
	import Navbar from '@/components/Navbar/index.vue'
	import List from '@/my/Report/components/List.vue'
	
	const list = reactive([
		{
			name: "全部"
		},
		{
			name: '未完成'
		},
		{
			name: '已完成'
		}
	])
</script>

<style lang="scss" scoped>
.container {
	flex-direction: column;
	background-color: #F3F5FF;
	
	.descripe {
		line-height: 38rpx;
		padding: 25rpx;
		color: #6C7282;
		font: {
			size: 26rpx;
		}
	}
	
	.uv-tabs {
		background-color: #fff;
		
		::v-deep {
			.uv-tabs__wrapper__nav__item {
				padding: 0 25rpx;
				width: 33.333%;
			}
		}
	}
	
	.swiper {
		flex: 1 1 auto;
		height: 1%;
	}
}
</style>
